---
import { buildUrl } from '@utils/url-builder';
import type React from 'react';
import config from '@config';
import { RssIcon } from 'lucide-react';
interface Props {
  color: string;
  dataTarget: number;
  icon: React.ElementType;
  label: 'domains' | 'services' | 'commands' | 'queries' | 'events' | 'flows';
}

const { color, dataTarget, icon: Icon, label } = Astro.props;
const isRSSEnabled = config.rss?.enabled;
---

<div class={`relative text-center ${color}`}>
  <div class="flex justify-center mb-2">
    <Icon className="w-8 h-8" />
  </div>

  <div class="text-2xl font-bold mb-1">
    <span class="statistic" data-target={dataTarget}>0</span>
  </div>

  <a href={buildUrl(`/discover/${label}`)} class="static hover:underline underline-offset-8 text-sm text-gray-600 capitalize">
    {label}
  </a>
  {
    isRSSEnabled && (
      <div class="text-center flex justify-center items-center mt-2">
        <a href={buildUrl(`/rss/${label}/rss.xml`)} class="flex items-center space-x-2 hover:underline underline-offset-8 ">
          <RssIcon className="h-3 w-3 text-gray-800 group-hover:text-white" strokeWidth={1} />
          <span class="text-xs text-gray-600 capitalize">RSS Feed</span>
        </a>
      </div>
    )
  }
</div>

<script>
  function animateStatistics() {
    const statistics = document.querySelectorAll('.statistic');
    statistics.forEach((statistic) => {
      let target = parseInt(statistic.getAttribute('data-target')!);
      let current = 0;
      const increment = target / 50;
      const timer = setInterval(() => {
        current += increment;
        if (current >= target) {
          clearInterval(timer);
          statistic.textContent = target.toString();
        } else {
          statistic.textContent = Math.round(current).toString();
        }
      }, 20);
    });
  }

  window.addEventListener('load', animateStatistics);
</script>
